<template>
	<div class=".bg">
		<div class="banner">
			<image :src="banner" mode="widthFix"></image>
		</div>
		<div class="container">
			<div class="jiti">
				<div class="list">
					<div class="item" v-for="(item,index) in info.list" :key="index" @click="selectItem(item)" :class="item.checked ? 'selected':''">
						<h3>{{index+1}}、{{item.name}}</h3>
						<ul class="userList">
							<li class="label">表演者：</li>
							<li v-for="(user,j) in item.users" :key="j" :class="user == toupiaoInfo[0].selectPeople ? 'sBold': ''">{{user}} <template v-if="j < (item.users.length - 1)">、</template></li>
						</ul>
						<!-- <div class="btn">
							<u-button type="error" size="mini" shape="circle" text="投票"></u-button>
						</div> -->
					</div>
				</div>
			</div>
		</div>
		
		<div class="fixBottom" v-if="tpEnd">
			<div class="container">
				<div class="btn">
					<u-button type="error" shape="circle" text="前往首页" @click="toNext"></u-button>
				</div>
			</div>
		</div>
		
		<u-divider text="分割线" :dot="true"></u-divider>
		
		<div class="logo">
			<image src="https://www.baixuemianshi.com/zhuanti/images/logo_dark.png" mode="widthFix"></image>
		</div>
		
		<div class="loadBox" v-if="showLoading">
			<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="加载中..." textSize="20"></u-loading-icon>
		</div>
		
		<u-gap height="100" bgColor="#f4f5ff"></u-gap>

		
		<u-popup :show="showUser" @close="showUser = false"  mode="center">
			<div class="popcontent">
				<h4>选择一个你认为最具创意人员</h4>
				<u-radio-group v-model="selectPeople" placement="column" iconPlacement="right" > 
				    <u-radio activeColor="red" :customStyle="{ padding: '15rpx 0',borderBottom: '1px solid #ccc'}" v-for="(item, index) in selectGroup.users" :key="index" :label="item" :name="item">
				    </u-radio>
				  </u-radio-group>
				<div class="btn">
					<u-button type="error" text="投票" @click="tp()"></u-button>
				</div>
				
			</div>
		</u-popup>
		
		
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				banner: "https://www.baixuemianshi.com/zhuanti/images/nianhui/banner_caiy.jpg?" + new Date(),
				openid:"",
				info:"",
				toupiaoInfo:{
					award:"",
					title: "",
					selectPeople:"",
					user:""
				},
				showUser: false,
				selectGroup:"",
				selectPeople:"",
				tpEnd: false,
				showLoading: true,
				toupiao_user:""
			}
		},
		onShareAppMessage(res) {},
		onLoad(options) {
			
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			}
		},
		created() {
			let that = this;
			let tu = wx.getStorageSync("tpUser");
			if(tu){
				that.toupiao_user = tu
			}
			that.getopenid()
			
		},
		mounted() {
			let that = this 
		},
		watch: {
			
		},
		methods: {
			...mapActions(['LogSetPhone']),
			getopenid() {
				let that = this
				wx.cloud.callFunction({
					name: 'getopenid',
					data: {},
					complete: res => {
						wx.setStorageSync("useropenid", res.result.openid)
						that.openid = res.result.openid
						that.getToupiao()
					}
				})
			},
			async getToupiao(){
				let that = this
				let tp = await db.collection("nh_choujiang").where({
					_openid: that.openid,
					award: "才艺奖"
				}).get()
				if(tp.data.length > 0){
					that.tpEnd = true
					that.toupiaoInfo = tp.data
					setTimeout(()=>{
						that.showLoading = false
					},200)
				}
				that.getInfo()
			},
			toNext(){
				uni.navigateTo({
					url:"./index"
				})
			},
			getInfo(){
				let that = this
				uni.request({
					url: "https://www.baixuemianshi.com/zhuanti/images/nianhui/nianhui.js",
					method: 'get',
					dataType: 'text',
					data: {
						sstimes: new Date()
					},
					success: function(res) {
						var resjson = JSON.parse(res.data);
						that.info = resjson
						if(that.toupiaoInfo.length > 0){
							that.toupiaoInfo.map((item,index) => {
								that.info.list.map((a,j) =>{
									if(a.name == item.title){
										that.info.list[j].checked = true
									}
								})
							})
						}
						that.showLoading = false
					}
				});
			},
			selectItem(item){
				if(this.tpEnd){
					uni.showToast({
						title:"您已投票",
						icon:"error"
					})
					return
				}
				this.selectPeople = ""
				this.selectGroup = item
				this.showUser = true
			},
			tp(){
				let that = this
				that.showUser = false
				that.showLoading = true
				if(!that.selectPeople){
					that.showLoading = false
					uni.showToast({
						title:"请选择人员",
						icon:"error"
					})
					return
				}
				let d = {
					award:"才艺奖",
					title: that.selectGroup.name,
					selectPeople:that.selectPeople,
					user:that.toupiao_user
				}
				that.addDate(d)
			},
			async addDate(d){
				let that = this
				await db.collection("nh_choujiang").add({
					data:d,
					success: res =>{
						that.getToupiao()
						
						uni.showToast({
							title:"投票成功",
							icon:"success"
						})
						
					}
				})
			}
		},
		components: {

		}
	};
</script>

<style>
	@import url(./index.css);
</style>